<template>
  <div class="signin-com" ref="signInModule">
    <div class="blur-bg"></div>
    <div class="iconfont lang" @click="changeLang"
      :class="systemLang === 'en' ? 'icon-yuyanzhongwen' : 'icon-yuyanyingwen'"></div>
    <div class="iconfont theme" @click="changeTheme"
      :class="appStyle === 'dark' ? 'icon-taiyang-copy' : 'icon-yuliang'"></div>
    <div class="center-block">
      <div class="left-content">
        <slot></slot>
      </div>
      <div class="right-content">
        <div class="top-title">{{ $t("signin.loginTitle") }}</div>
        <div class="input-block">
          <div class="input-row-editor">
            <input :placeholder="$t('signin.username')" v-model="username" :maxlength="18" type="text"
              class="this-input" />
          </div>
          <div class="input-row-editor">
            <input :placeholder="$t('signin.password')" type="password" class="this-input" :maxlength="18"
              v-model="password" :class="{ psw: password }" @keydown.enter="login" />
          </div>
        </div>
        <div class="btn-two">
          <div class="sign-btn" @click="register">{{ $t("signin.signinBtnTitle") }}</div>
          <div class="sign-btn" @click="login">{{ $t("signin.loginBtnTitle") }}</div>
        </div>
        <div class="forget">{{ $t("signin.forgetPsw") }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, nextTick, ref } from "vue";
import { homeStore } from "@/store";
import { httppost, PortUrl } from "@/utils/httpRequest";
import { encode } from "@/utils/utils";
import { useRouter } from "vue-router";
import { confirmTheme } from "@/theme"
import { i18n } from '@/lang'
export default defineComponent({
  name: "SignInBox",
  setup() {
    const signInModule = ref<HTMLDivElement>();
    const editorModule = ref(false); // 是否处于编辑模式
    const appName = computed(() => {
      return homeStore().APP_NAME
    });
    const username = ref("");
    const password = ref("");
    const router = useRouter()

    // 注册
    const register = () => {
      httppost(PortUrl.register, {
        username: encode(username.value),
        password: encode(password.value),
      }).then((res) => {
        console.log(res);
      });
    };
    // 登录
    const login = () => {
      httppost(PortUrl.login, {
        username: encode(username.value),
        password: encode(password.value),
      }).then((res) => {
        console.log(res);
        router.replace({
          name: 'NotImportant',
          params: {}
        })
      });
    }

    // 当前系统语言
    const systemLang = computed({
      get() {
        return homeStore().systemLang
      },
      set(val: 'en' | 'zh_cn') {
        homeStore().systemLang = val
      }
    })
    // 切换语言
    const changeLang = () => {
      systemLang.value = systemLang.value === 'en' ? 'zh_cn' : 'en'
      i18n.global.locale = systemLang.value
    }
    // 当前主题
    const appStyle = computed({
      get() {
        return homeStore().appStyle
      },
      set(val: 'light' | 'dark') {
        homeStore().appStyle = val
      }
    })
    // 切换主题
    const changeTheme = () => {
      appStyle.value = appStyle.value === 'light' ? 'dark' : 'light'
      confirmTheme(appStyle.value) // 默认使用深色主题
    }
    return {
      login,
      register,
      username,
      password,
      appName,
      signInModule,
      editorModule,
      systemLang,
      changeLang,
      appStyle,
      changeTheme,
    };
  },
});
</script>
<style lang="less" scoped>
.signin-com {
  position: fixed;
  width: 100%;
  height: 100%;
  background: @signinLinearColor;

  .lang {
    width: 45px;
    cursor: pointer;
    font-size: 32px;
    position: absolute;
    right: 80px;
    top: 30px;

    &:hover {
      color: @mainFontHoverColor;
    }
  }

  .theme {
    .lang();
    font-size: 28px;
    font-weight: bold;
    right: 40px;
    top: 30px;
  }

  .blur-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(88, 88, 88, 0.1);
    box-shadow: inset 0px 0px 30px 3px rgba(0, 0, 0, 0.45);
  }

  .center-block {
    position: absolute;
    width: 600px;
    height: 360px;
    overflow: hidden;
    border-radius: 4px;
    top: calc(50% - 180px);
    left: calc(50% - 300px);
    box-shadow: 3px 3px 60px 3px rgba(0, 0, 0, 0.25);
    display: flex;
  }

  .left-content {
    width: calc(50%);
    height: calc(100% - 60px);
    padding: 30px;
    background: @signinLinearColor;
  }

  .right-content {
    width: calc(50%);
    height: calc(100% - 60px);
    padding: 30px;
    background: rgba(195, 202, 247, 0.2);
    box-shadow: 2px 2px 30px 3px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .top-title {
    font-size: calc(@mainFontSize + 8px);
    color: @mainFontColor;
    letter-spacing: 1px;
  }

  .input-block {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 34px;
  }

  .noinput {
    height: 100%;
    align-items: center;
    display: flex;
    color: @mainFontColor;
    font-size: calc(@mainFontSize);
  }

  .btn-two {
    width: 100%;
    display: flex;
    align-items: center;
    color: @mainFontColor;

  }

  .sign-btn {
    flex: 1;
    margin-right: 20px;
    border: solid 1px @mainFontColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: @mainFontSize;
    height: 28px;
    cursor: pointer;
    transition: all 0.4s;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      background: @mainHoverBgColor;
      box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
      color: @mainFontColor;
      border: solid 1px @mainFontColor;
    }
  }

  .forget {
    padding: 0 1px 1px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @mainFontColor;
    margin-top: auto;
    letter-spacing: 1px;
    font-size: @mainFontSize;
    line-height: @mainFontSize;
    border-bottom: solid 1px transparent;
    cursor: pointer;
    margin-bottom: 10px;

    &:hover {
      border-bottom: solid 1px @mainFontColor;
    }
  }

  .input-row-editor {
    height: 40px;
    border-bottom: 1px solid @mainFontColor;

    cursor: text;
    color: @mainFontColor;

    font-size: calc(@mainFontSize);
    display: flex;
    flex-direction: column;

    .this-input {
      border: none;
      padding: 0 2px;
      caret-color: @mainFontColor;

      letter-spacing: 1px;
      color: @mainFontColor;
      font-size: calc(@mainFontSize + 2px);
      height: 100%;
      line-height: 38px;

      &::placeholder {
        font-size: calc(@mainFontSize + 2px);
        color: @mainFontColor;
        padding: 0 2px;
      }
    }

    .psw {
      padding: 5px 0;
      line-height: 32px;
      font-size: calc(@mainFontSize + 5px);
    }
  }
}
</style>
